<template>
	<view class="productList" ref="container">

		<!-- <form @submit.prevent="submitForm">
      <view class="search bg-color-main acea-row row-between-wrapper">
        <view class="input acea-row row-between-wrapper">
          <input placeholder="搜索商品信息" v-model="where.keyword" />
          <text class="iconfont icon-sousuo" @click="submitForm"></text>
        </view>
        <view class="iconfont" :class="Switch === true ? 'icon-pailie' : 'icon-tupianpailie'" @click="switchTap"></view>
      </view>
    </form> -->
		<!-- 头部信息 -->
		<view class="header bg-color-main">
			<image class="usda-logo" :src="storeInfo.image?storeInfo.image:''" mode="aspectFill"></image>
			<view class="store-info">
				<text class="store-name">{{title}}</text>
				<text class="store-address">门店地址: {{storeInfo.address}}</text>
				<text class="store-phone">联系电话: {{storeInfo.phone}}</text>
				<text class="store-time">营业时间: {{storeInfo.dayTime}}</text>
			</view>
		</view>
		<view class="nav acea-row row-middle" style="position: sticky;top:0;">
			<view class="item" :class="title ? 'font-color-main' : ''" @click="set_where(0)">{{ title ? title : '默认' }}
			</view>
			<view class="item" @click="set_where(1)">
				价格
				<image :src="`${$VUE_APP_RESOURCES_URL}/images/horn.png`" v-if="price === 0" />
				<image :src="`${$VUE_APP_RESOURCES_URL}/images/up.png`" v-if="price === 1" />
				<image :src="`${$VUE_APP_RESOURCES_URL}/images/down.png`" v-if="price === 2" />
			</view>
			<view class="item" @click="set_where(2)">
				销量
				<image :src="`${$VUE_APP_RESOURCES_URL}/images/horn.png`" v-if="stock === 0" />
				<image :src="`${$VUE_APP_RESOURCES_URL}/images/up.png`" v-if="stock === 1" />
				<image :src="`${$VUE_APP_RESOURCES_URL}/images/down.png`" v-if="stock === 2" />
			</view>
			<!-- down -->
			<view class="item" :class="nows ? 'font-color-main' : ''" @click="set_where(3)">新品</view>
		</view>
		<view class="list acea-row row-between-wrapper" style="margin-top: 0;" :class="Switch === true ? '' : 'on'"
			ref="container" v-if="!isIntegral">
			<view @click="goGoodsCon(item)" class="item" :class="Switch === true ? '' : 'on'"
				v-for="(item, productListIndex) in productList" :key="productListIndex" :title="item.storeName">
				<view class="pictrue" :class="Switch === true ? '' : 'on'">
					<image :src="item.image" :class="Switch === true ? '' : 'on'" />
				</view>
				<view class="text" :class="Switch === true ? '' : 'on'">
					<view class="name line1">{{ item.storeName }}</view>
					<view class="money font-color-main" :class="Switch === true ? '' : 'on'">
						￥
						<text class="num">{{ item.price }}</text>
					</view>
					<view class="vip acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'">
						<view class="vip-money">￥{{ item.otPrice }}</view>
						<view>已售{{ item.sales }}件</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'" ref="container"
			v-if="isIntegral == 'true'">
			<view @click="goIntegralGoodsCon(item)" class="item" :class="Switch === true ? '' : 'on'"
				v-for="(item, productListIndex) in productList" :key="productListIndex" :title="item.storeName">
				<view class="pictrue" :class="Switch === true ? '' : 'on'">
					<image :src="item.image" :class="Switch === true ? '' : 'on'" />
				</view>
				<view class="text" :class="Switch === true ? '' : 'on'">
					<view class="name line1">{{ item.storeName }}</view>
					<view class="money font-color-main" :class="Switch === true ? '' : 'on'">
						<text class="num">{{ item.integral }}积分</text>
					</view>
					<view class="vip acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'">
						<!-- <view class="vip-money">￥{{ item.otPrice }}</view> -->
						<view>已售{{ item.sales }}件</view>
					</view>
				</view>
			</view>
		</view>
		<Loading :loaded="loadend" :loading="loading"></Loading>
		<view class="noCommodity" style="background-color: #fff" v-if="productList.length === 0 && where.page > 1">
			<view class="noPictrue">
				<image :src="`${$VUE_APP_RESOURCES_URL}/images/noGood.png`" class="image" />
			</view>
		</view>
		<Recommend v-if="productList.length === 0 && where.page > 1" :recommendLoading="recommendLoading"
			@changeRecommendLoading="changeRecommendLoading"></Recommend>
	</view>
</template>
<script>
	import Recommend from '@/components/Recommend'
	import {
		getProducts,
		getProductsIntegral
	} from '@/api/store'
	import Loading from '@/components/Loading'

	export default {
		name: 'GoodsList',
		components: {
			Recommend,
			Loading,
		},
		props: {},
		data: function() {
			const s = '',
				id = 0,
				title = ''

			return {
				hostProduct: [],
				productList: [],
				Switch: true,
				where: {
					page: 1,
					limit: 8,
					keyword: s,
					storeId: id, //二级分类id
					news: 0,
					priceOrder: '',
					salesOrder: '',
				},
				title: title && id ? title : '',
				loadTitle: '',
				loading: false,
				loadend: false,
				price: 0,
				stock: 0,
				nows: false,
				recommendLoading: false,
				target: false,
				isIntegral: false,
				storeInfo: {
					address: '',
					dayTime: '',
					phone: '',
					image: '',
					introduction: '',
				},
			}
		},
		watch: {
			title() {
				this.updateTitle()
			},
			isIntegral() {
				if (this.isIntegral) {
					uni.setNavigationBarTitle({
						title: '积分商品',
					})
				} else {
					uni.setNavigationBarTitle({
						title: '商品列表',
					})
				}
			},
			$yroute(to) {},
		},
		mounted: function() {
			const {
				s = '', id = 0, title = '', isIntegral = false, address = "", introduction = "", image = "", phone =
					"", dayTime = "",
			} = this.$yroute.query

			this.where.keyword = s
			this.where.isIntegral = isIntegral == 'true' ? 1 : 0
			this.isIntegral = isIntegral
			this.storeInfo.address = address
			this.storeInfo.introduction = introduction
			this.storeInfo.image = image
			this.storeInfo.phone = phone
			this.storeInfo.dayTime = dayTime
			this.updateTitle()
			this.getProductList()
		},
		onReachBottom() {
			this.recommendLoading = true;
			!this.loading && this.getProductList()
		},
		onHide() {},
		methods: {
			changeRecommendLoading(recommendLoading) {
				this.recommendLoading = recommendLoading
			},
			goGoodsCon(item) {
				this.$yrouter.push({
					path: '/pages/shop/GoodsCon/index',
					query: {
						id: item.id,
						isIntegral: this.isIntegral,
					},
				})
			},
			goIntegralGoodsCon(item) {
				this.$yrouter.push({
					path: '/pages/shop/IntegralGoodsCon/index',
					query: {
						id: item.id,
						isIntegral: this.isIntegral,
					},
				})
			},
			updateTitle() {
				uni.setNavigationBarTitle({
					title: this.title,
				})
			},
			getProductList() {
				this.setWhere()
				const {
					s = '', id = 0, title = ''
				} = this.$yroute.query
				if (s !== this.where.keyword || id !== this.where.storeId) {
					this.loadend = false
					this.loading = false
					this.where.page = 1
					this.where.storeId = id
					this.title = title && id ? title : ''
					this.nows = false
					this.$set(this, 'productList', [])
					this.price = 0
					this.stock = 0
					// this.getProductList();
				}
				let q = this.where
				let getData = this.isIntegral !== 'true' ? getProducts : getProductsIntegral
				getData(q).then(res => {
					this.loading = false
					if (this.target) {
						this.productList = res.data
						this.target = false
					} else {
						this.productList.push.apply(this.productList, res.data)
					}
					console.log(this.target)
					this.loadend = res.data.length < this.where.limit //判断所有数据是否加载完成；
					this.where.page = this.where.page + 1
				})
			},
			submitForm: function() {
				this.$set(this, 'productList', [])
				this.where.page = 1
				this.loadend = false
				this.loading = false
				this.getProductList()
			},
			//点击事件处理
			set_where(index) {
				this.productList = []
				this.$set(this, 'productList', [])
				this.where.page = 1
				this.target = true
				this.loadend = false

				switch (index) {
					case 0:
						return this.$yrouter.push({
							path: '/pages/shop/GoodsClass/index',
						})
					case 1:
						if (this.price === 0) this.price = 1
						else if (this.price === 1) this.price = 2
						else if (this.price === 2) this.price = 0
						this.stock = 0
						break
					case 2:
						if (this.stock === 0) this.stock = 1
						else if (this.stock === 1) this.stock = 2
						else if (this.stock === 2) this.stock = 0
						this.price = 0
						break
					case 3:
						this.nows = !this.nows
						break
					default:
						break
				}
				// this.getProductList()
				this.setWhere()
				const {
					s = '', id = 0, title = ''
				} = this.$yroute.query
				if (s !== this.where.keyword || id !== this.where.storeId) {
					this.loadend = false
					this.loading = false
					this.where.page = 1
					this.where.storeId = id
					this.title = title && id ? title : ''
					this.nows = false
					this.$set(this, 'productList', [])
					this.price = 0
					this.stock = 0
					// this.getProductList();
				}
				let q = this.where
				let getData = this.isIntegral !== 'true' ? getProducts : getProductsIntegral
				getData(this.where).then(res => {
					this.loading = false
					this.productList = res.data
				})
			},
			//设置where条件
			setWhere() {
				if (this.price === 0) {
					this.where.priceOrder = ''
				} else if (this.price === 1) {
					this.where.priceOrder = 'asc'
				} else if (this.price === 2) {
					this.where.priceOrder = 'desc'
				}
				if (this.stock === 0) {
					this.where.salesOrder = ''
				} else if (this.stock === 1) {
					this.where.salesOrder = 'asc'
				} else if (this.stock === 2) {
					this.where.salesOrder = 'desc'
				}
				this.where.news = this.nows ? '1' : '0'
			},
			switchTap() {
				this.Switch = !this.Switch
			},
		},
	}
</script>
<style scoped lang="less">
	.noCommodity {
		border-top: 3px solid #f5f5f5;
		padding-bottom: 1px;
	}

	.header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		background-color: #2169D3;
		color: white;
		padding: 20rpx;
		border-radius: 10rpx;
		height: 180rpx;

		.usda-logo {
			width: 140rpx;
			height: 140rpx;
			margin-right: 20rpx;
			border-radius: 12rpx;
		}

		.store-info {
			display: flex;
			flex-direction: column;

			.store-name {
				font-size: 30rpx;
				font-weight: bold;
			}

			.store-address,
			.store-phone,
			.store-time {
				font-size: 24rpx;
				margin-top: 10rpx;
			}
		}
	}
</style>